﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>基本的选择元素方式</title>
    <style type="text/css">
        p.selected {
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div>
        <p>Microsoft: Windows Azure, Bing, Windows Phone, Office 365</p>
        <p class="google">Google: App Engine, Google Search, Android, Google Docs</p>
        <p id="oracle">
            Oracle：MySQL, Solaris, Java
        </p>
    </div>
    <input type="button" value="根据元素的ID选择" onclick="selectByID()" />
    <input type="button" value="根据元素标签名称选择" onclick="selectByTagName()" />
    <input type="button" value="根据样式名称选择" onclick="selectByClass()" />

    <script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function selectByID() {
            $("#oracle").toggleClass("selected");
        }
        function selectByTagName() {
            $("p").toggleClass("selected");
        }
        function selectByClass() {
            $("p.google").toggleClass("selected");
        }
    </script>
</body>
</html>
